<template>
  <div class="header">
    <h1>{{ title }}</h1>
    <nav>
      <ul>
        <li v-for="item in menuItems" :key="item.id">
          <a :href="item.url">{{ item.name }}</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      title: "Vue 应用",
      menuItems: [
        { id: 1, name: "首页", url: "/" },
        { id: 2, name: "关于", url: "/about" }
      ]
    };
  },
  methods: {
    handleMenuClick(item) {
      console.log("点击菜单:", item.name);
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #f8f9fa;
  padding: 1rem;
}

.header h1 {
  color: #333;
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
}

nav li {
  margin-right: 1rem;
}

nav a {
  text-decoration: none;
  color: #007bff;
}

nav a:hover {
  text-decoration: underline;
}
</style>
